<template>
<div>
  <bread ref="bread"></bread>
  <el-card>
<!--     头部搜索和添加-->
    <el-row :gutter="20">
      <el-col :span="10">
        <el-input placeholder="请输入内容"  class="input-with-select" v-model="queryInfo.query" clearable @clear="getOrderList">
          <el-button slot="append" icon="el-icon-search" @click="getOrderList"></el-button>
        </el-input>
      </el-col>
    </el-row>
<!--    订单列表展示-->
    <el-table :data="orderList" border stripe>
     <el-table-column type="expand">
      <template v-slot="scope">
        <el-form label-position="left" class="demo-table-expand">
          <el-form-item label="用户ID:">
            <span>{{ scope.row.user_id }}</span>
          </el-form-item>
          <el-form-item label="订单ID:">
            <span>{{ scope.row.order_id }}</span>
          </el-form-item>
          <el-form-item label="订单编号:">
            <span>{{ scope.row.order_number }}</span>
          </el-form-item>
          <el-form-item label="商品价格:">
            <span>{{ scope.row.order_price }}</span>
          </el-form-item>
          <el-form-item label="支付方式:">
            <span>{{ scope.row.order_pay }}</span>
          </el-form-item>
          <el-form-item label="发货状态:">
            <span>{{ scope.row.is_send }}</span>
          </el-form-item>
          <el-form-item label="发票抬头:">
            <span>{{ scope.row.order_fapiao_title }}</span>
          </el-form-item>
          <el-form-item label="公司名称:">
            <span>{{ scope.row.order_fapiao_company }}</span>
          </el-form-item>
          <el-form-item label="发票内容:">
            <span>{{ scope.row.order_fapiao_content }}</span>
          </el-form-item>
          <el-form-item label="发货地址:">
            <span>{{ scope.row.consignee_addr }}</span>
          </el-form-item>
          <el-form-item label="支付状态:">
            <span>{{ scope.row.pay_status }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ scope.row.create_time }}</span>
          </el-form-item>
          <el-form-item label="更新时间:">
            <span>{{ scope.row.update_time }}</span>
          </el-form-item>
        </el-form>
      </template>
     </el-table-column>
     <el-table-column label="#" type="index"></el-table-column>
     <el-table-column label="订单编号" prop="order_number"></el-table-column>
     <el-table-column label="订单价格" prop="order_price"></el-table-column>
     <el-table-column label="是否支付/支付方式">
       <template v-slot="scope">
       <el-tag v-if="scope.row.order_pay==1">支付宝</el-tag>
       <el-tag type="success" v-else-if="scope.row.order_pay==2">微信</el-tag>
       <el-tag type="info" v-else-if="scope.row.order_pay==3">银行卡</el-tag>
       <el-tag type="warning"v-else-if="scope.row.order_pay==0">未支付</el-tag>
       </template>
     </el-table-column>
     <el-table-column label="是否发货" prop="is_send"></el-table-column>
    </el-table>
    <!--     分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </el-card>
</div>
</template>

<script>
import bread from "@/components/bread";
export default {
  name: "orders",
  components:{ bread },
  data(){
    return{
      queryInfo:{
        query:'',
        pagenum: 1,
        pagesize:10
      },
      total:0,
      orderList:[],
      breadList:[]
    }
  },
  methods:{
   async getOrderList(){
      const { data:res} = await this.$http.get('orders',{ params:this.queryInfo} )
        this.orderList=res.data.goods
        this.total=res.data.total
    },
    handleSizeChange(newSize){
     this.queryInfo.pagesize=newSize
      this.getOrderList()
    },
    handleCurrentChange(newPage){
     this.queryInfo.pagenum=newPage
      this.getOrderList()
    }
  },
  async created() {
    this.getOrderList()
    const { data: res } = await this.$http.get('menus')
    this.breadList.push(res.data[3].authName)
    this.breadList.push(res.data[3].children[0].authName)
    this.$refs.bread.getBreadList(this.breadList)
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
  margin-left: 10px;
}
.demo-table-expand .el-form-item {
  width: 90px;
  color:#606266;
  margin-right: 0;
  margin-bottom: 0;
  width:80%;
}
.demo-table-expand .el-form-item label{
  color: #1E9FFF;
}
</style>
